<template>
  <view class="row productWrap">
    <view style="height: 176rpx;width: 176rpx;">
      <u-image height="176" width="176" :src="item.goodsPic" :lazy-load="true" @click="goProductDetail" mode="aspectFit"></u-image>
    </view>
    <view class="productRightWrap">
      <view @click="goProductDetail">
        <view style="padding-bottom: 12rpx; width: 100%;">
          <text class="categoryTitle" >{{ item.name }}</text>
        </view>
        <view class="price">
          <view class="unit">￥</view>
          <view class="categoryPrice">{{ item.price }}</view>
        </view>
      </view>
      <view style="justify-content: flex-end;" class="row">
        <view class="collectStyle" @click="addShoppingCar">
          <image
            src="../../static/addCart.png"
            mode="scaleToFill"
            style="height: 50rpx; width: 50rpx;"
          />
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import { addShoppingCar } from '@/services/shop';
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    isLogin: {
      type: Boolean,
      default: () => false
    },
  },
  methods: {
    goProductDetail() {
      const { id } = this.item;
      uni.navigateTo({
        url: `/pages/productDetail/index?id=${id}`,
      })
    },
    async addShoppingCar() {
      if (this.isLogin) {
        const res = await addShoppingCar({
          goodsId: this.item.id,
        })
        if (res.success) {
          uni.$u.toast('加入购物车成功')
        } else {
          uni.$u.toast('加入购物车失败')
        }
      } else {
        console.log('addShoppingCar', 'showLoginModal');
        this.$emit('showLoginModal')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.productWrap {
  background-color: #fff;
  border-bottom: 1rpx solid #EDEDED;
  padding: 44rpx 0;
  align-items: center;
  width: 100%;
}
.productRightWrap {
  display: flex;
  flex-direction: column;
  width: calc(100% - 184rpx);
  justify-content: space-between;
  height: 160rpx;
  padding: 8rpx 0 12rpx 8rpx;
}
.categoryTitle {
  color: #30322C;
  font-size: 32rpx;
  line-height: 32rpx;
  font-weight: 600;
  overflow: hidden;/*超出文本隐藏*/
  text-overflow:ellipsis; /*超出部分省略号显示 */
  display: -webkit-box;/*弹性盒模型*/
  -webkit-box-orient: vertical;/*上下垂直*/
  -webkit-line-clamp: 2;/*自定义行数*/
}
.price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding-bottom: 10rpx;
}
.integral {
  display: flex;
  flex-direction: row;
  align-items: "center";
}
.unit {
  color: #59B235;
  font-size: 20rpx;
  line-height: 24rpx;
}
.categoryPrice {
  color: #59B235;
  font-size: 28rpx;
  line-height: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 600;
}
.priceDecimal {
  font-size: 24rpx;
  font-weight: 600;
  color: #59B235;
}
.collectStyle {
  width: 48rpx;
  height: 48rpx;
  z-index: 1;
  opacity: 1;
  margin-right: 28rpx;
}
.icon {
  width: 25%;
  align-items: center;
  justify-content: center;
}
</style>